import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { Button, Typography } from '@material-ui/core';
import { Image } from 'components/atoms';
import { SectionHeader } from 'components/molecules';
import { HeroShaped } from 'components/organisms';
import { useSelector, useDispatch } from 'react-redux'

const useStyles = makeStyles(() => ({
    image: {
        objectFit: 'cover',
    },
    fontWeight700: {
        fontWeight: 700,
    },
}));

const Hero = props => {

    const { className, onButtonClick, ...rest } = props;
    const classes = useStyles();
    const cover = useSelector((state) => state.cover.cover_blog);

    return (
        <div className={className} {...rest}>
            <HeroShaped
                leftSide={
                    <div>
                        <SectionHeader
                            title={
                                <span>
                                    <Typography component="span" variant="inherit" color="primary">
                                        {cover.title ? cover.title : "Get the Conversation Started"}
                                    </Typography>{' '}
                                </span>
                            }
                            subtitle={cover.sub_title ? cover.sub_title : "What kind of post do you want to create?"}
                            // ctaGroup={[
                            //     <Button variant="contained" color="primary" size="large"
                            //         onClick={onButtonClick}>
                            //         Follow
                            //     </Button>,
                            // ]}
                            align="left"
                            titleVariant="h3"
                        />
                    </div>
                }
                rightSide={
                    <Image
                        src={cover.image ? cover.image:"https://assets.maccarianagency.com/the-front/photos/elearning/elearning.jpg"}
                        srcSet={cover.image ? cover.image:"https://assets.maccarianagency.com/the-front/photos/elearning/elearning@2x.jpg 2x"}
                        alt="..."
                        className={classes.image}
                        lazyProps={{
                            width: '100%',
                            height: '100%',
                        }}
                    />
                }
            />
        </div>
    );
};

Hero.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,

    onButtonClick: PropTypes.func
};

export default Hero;
